<!--
 * @Author: your name
 * @Date: 2021-09-01 13:49:50
 * @LastEditTime: 2021-09-15 17:28:09
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \usp-osm-frondend\src\views\shopConfig\banner.vue
-->
<template>
    <el-dialog
      title="预览"
      append-to-body
      :visible.sync="dialogTableVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :wrapperClosable="false"
      destroy-on-close
      top="0"
      width="375px"
      center
    >
      <div class="preview-wrap" v-loading="pageLoading" element-loading-text="加载中...">
        <div class="block preview-banner">
          <el-carousel height="375px">
            <el-carousel-item
              v-for="item in bannerList"
              :key="item.id"
            >
              <el-image :src="item.imagePath" style="height: 375px;object-fit: cover;"></el-image>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="preview-content">
          <div class="content-item" v-for="item in categoryList" :key="item.categoryId">
            <div class="item-header flex justify-between align-center">
              <div class="header-title">{{item.categoryName}}</div>
              <span v-if="item.showMore =='1'">更多 <i class="el-icon-arrow-right"></i></span>
            </div>
            <div class="content-list">
              <div v-for="(items, index) in item.productList" :key="index">
                <div class="list" v-if="items.moduleStyle=='MODULESTYLE001'">
                    <el-image :src="items.spuImage"></el-image>
                    <div class="list-info">
                        <div class="info-title clamp">{{items.productName}}</div>
                        <div class="list-tag flex flex-wrap">
                            <span class="item-tag" v-for="(tags,index) in items.labels" :key="index">{{tags}}</span>
                        </div>
                        <div class="item-price">
                            <span>价格：￥{{items.minPrice}}<span v-if="items.minPrice != items.maxPrice">起</span></span>
                        </div>
                    </div>
                </div>
                <div class="card-list" v-else>
                    <div class="list-item">
                    <el-image :src="items.spuImage"></el-image>
                    <div class="list-info">
                        <div class="info-title clamp">{{items.productName}}</div>
                        <div class="info-price">
                        <span>价格：￥{{items.minPrice}}<span v-if="items.minPrice != items.maxPrice">起</span></span>
                        </div>
                        <div class="info-des">{{items.productDesc}}</div>
                    </div>
                    </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button class="search-btn dark-btn" @click="pageSend" v-if="!preview">发 布</el-button>
        <el-button @click="dialogTableVisible = false">{{preview ? '关 闭' : '取 消' }}</el-button>
    </div>
    </el-dialog>
</template>
<script>
import { getPreviewPage, getSaveConfig } from '@/api/shopConfig'
export default {
  data () {
    return {
      dialogTableVisible: false,
      pageLoading: false,
      bannerList: [],
      categoryList: [],
      preview: true
    }
  },
  methods: {
    open (type) {
      if (type === 'preview') {
        this.preview = true
      } else {
        this.preview = false
      }
      this.dialogTableVisible = true
      this.getData()
    },
    getData () {
      this.pageLoading = true
      getPreviewPage({ categoryId: 1000 }).then((res) => {
        if (res) {
          if (Number(res.code) === 1) {
            this.bannerList = res.obj.kvImageList
            this.categoryList = res.obj.categoryList
          }
          this.pageLoading = false
        }
      })
    },
    pageSend () {
      this.pageLoading = true
      getSaveConfig().then((res) => {
        if (res) {
          if (Number(res.code) === 1) {
            this.$alert('发布成功')
            this.dialogTableVisible = false
          }
          this.pageLoading = false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .el-dialog__body {
  padding: 0 !important;
}
.flex {
  display: flex;
}
.flex-wrap {
    flex-wrap: wrap;
}
.justify-between {
  justify-content: space-between;
}
.align-center {
  align-items: center;
}
.clamp {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.preview-content {
  margin: 20px;
  .content-item {
    margin-top: 20px;
    .item-header {
      margin-top: 10px;
      .header-title {
        font-size: 24px;
        line-height: 33px;
        color: #000;
        font-weight: 500;
      }
    }
    .content-list {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      overflow: hidden;
      margin-top: 20px;
      .list {
        overflow: hidden;
        height: 100%;
        border-radius: 3px;
        position: relative;
        margin-bottom: 20px;
        .el-image {
          width: 162px;
          height: 162px;
        }
        .list-info {
          .info-title {
            margin-top: 10px;
            font-size: 16px;
            line-height: 22px;
            font-weight: 500;
            color: #222;
          }
          .list-tag {
            max-width: 162px;
            margin: 6px 0;
            .item-tag {
              padding: 1px 4px;
              background: #f2f8ff;
              border-radius: 4px;
              font-size: 12px;
              color: #1773eb;
              line-height: 17px;
              margin-right: 10px;
              white-space: nowrap;
              margin-bottom: 4px;
            }
          }
          .item-price {
            font-size: 14px;
            line-height: 20px;
          }
        }
      }
      .card-list {
        width: 325px;
        margin-bottom: 20px;
        display: block;
        overflow: hidden;
        box-shadow: 0px 2px 10px 0px rgba($color: #000000, $alpha: 0.1);
        border-radius: 12px;
        .list-item {
          display: block;
          background-color: #ffffff;
          overflow: hidden;
          border-radius: 5px;
          margin: 0 !important;
          .el-image {
            width: 100%;
            height: auto;
          }
          .list-info {
            padding: 20px;
            .info-title {
              font-weight: 500;
              font-size: 16px;
            }
            .info-price {
              font-size: 14px;
              margin-top: 5px;
              margin-bottom: 5px;
            }
            .info-des {
              color: #aaaaaa;
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}
/deep/ .el-dialog__footer{
    margin-top: 15px;
    padding: 0 !important;
}
/deep/ .el-carousel__button{
  width: 5px !important;
  height: 5px !important;
}
</style>
